<template>
  <!-- x轴滚动条，可通过鼠标滚轮滚动-CSS实现 -->
  <div class='x-scroll-bar'>
    <div class="el-box">
      <div class="scroll-box">
        <div class="content-list">
          <div class="content-item" v-for="item in 10" :key="item">
            <img src="https://picsum.photos/200/300">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script setup>

</script>
 
<style lang='scss' scoped>
.x-scroll-bar {
  .el-box {
    width: 800px;
    height: 200px;
    background-color: rgba(224, 224, 224, 0.377);
  }

  .scroll-box {
    width: 200px;
    height: 800px;
    background-color: rgba(151, 151, 151, 0.377);
    overflow-y: scroll;
    // 更改滚动盒子旋转中心点， 选取父包裹盒子高度的一半作为x y轴旋转的中心点
    transform-origin: 100px 100px;
    transform: rotateZ(-90deg) rotateY(-180deg);

    .content-list {
      .content-item {
        transform: rotate(-90deg);
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>